<!-- components/Breadcrumb.vue -->
<template>
    <div class="breadcrumb-card">
      <el-breadcrumb separator-icon="ArrowRight" class="breadcrumb">
        <el-breadcrumb-item
          v-for="(item, index) in items"
          :key="item.path"
          :to="index === items.length - 1 ? null : { path: item.path }"
          :replace="true"
        >
          <el-icon v-if="item.icon" class="breadcrumb-icon">
            <component :is="item.icon" />
          </el-icon>
          <span class="breadcrumb-title">{{ item.title }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from "vue";
  import { useRoute } from "vue-router";
  
  // 定义菜单项类型
  interface BreadcrumbItem {
    title: string;
    path: string;
    icon?: string;
  }
  
  // 接收路由
  const route = useRoute();
  
  // 计算面包屑数据
  const items = computed(() => {
    return route.matched
      .filter((record) => record.meta?.title)
      .map((record) => {
        const title =
          typeof record.meta.title === "function"
            ? record.meta.title(route)
            : record.meta.title;
  
        return {
          title: title as string,
          path: record.path,
          icon: record.meta.icon as string | undefined,
        };
      });
  });
  </script>
  
  <style scoped>
  .breadcrumb-card {
    background-color: #fff;
    padding: 14px;
    box-shadow: 0 0 9px #dedede;
  }
  
  .breadcrumb {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  
  .breadcrumb :deep(.el-breadcrumb__inner) {
    color: #666 !important;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .breadcrumb :deep(.el-breadcrumb__separator) {
    color: #999;
  }
  
  .breadcrumb-icon {
    font-size: 14px;
    color: #999;
  }
  </style>